<style lang="less" scoped>
#home {
  background: #f6f6f6;
  height: 100%;
  // 顶部
  .header {
    height: 100px;
    background: #fff;
    box-shadow: 0 5px 5px #f3f3f3;
    position: relative;
    z-index: 2;

    div {
      color: #010101;
      display: flex;
      height: 100px;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px;

      .icon {
        width: 34px;
        height: 40px;
      }

      p {
        font-size: 30px;
      }

      .rolus {
        font-size: 24px;
      }
    }
  }
  // tab切换
  .tabWrap {
    background: #fff;
    height: 80px;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    border-bottom: 1px solid #eaeaea;
    div {
      width: 190px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      color: #676767;
      font-size: 30px;
      border-bottom: 6px solid transparent;
      &.cur {
        border-bottom-color: #e34c4e;
      }
    }
  }
  .notice {
    background: #f6f6f6;

    p {
      font-size: 26px;
      color: #151515;
      height: 30px;
      line-height: 30px;
      margin-bottom: 60px;
      margin-top: 40px;
      text-align: center;
    }
  }
  // 创建策略
  .createItem {
    padding: 0 30px 30px;
    background: #fff;
    .createTab {
      height: 60px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 0 30px;
      border-bottom: 1px solid #eaeaea;
      div {
        width: 190px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #676767;
        font-size: 24px;
        border-bottom: 6px solid transparent;
        &.cur {
          border-bottom-color: #78bd09;
        }
      }
    }
    .myGame,
    .resultGame,
    .todayGame {
      margin-top: 30px;
      div:not(.btnWrap) {
        display: flex;
        align-items: center;
        height: 80px;
        line-height: 80px;
        border-bottom: 1px solid #dfdfdf;
        span {
          width: 200px;
          font-size: 28px;
        }
        input {
          width: 100%;
          height: 90%;
          border: 0 none;
          font-size: 28px;
          outline: none;
        }
      }
      .btnWrap {
        display: flex;
        justify-content: space-between;
        p {
          height: 80px;
          width: 40%;
          line-height: 80px;
          border-radius: 10px;
          text-align: center;
          margin-top: 20px;
          margin-bottom: 50px;
          font-size: 30px;
          color: #fff;
          &.createBtn {
            background: #e14d4d;
          }
          &.changeBtn {
            background: #ccc;
          }
        }
      }
    }
    .todayGame {
      .btnWrap {
        .changeBtn {
          width: 100%;
        }
      }
    }
  }
  // 我的策略
  .itemList {
    margin-top: 40px;
    .item {
      height: 283px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 30px 5px 30px 15px;
      border-bottom: 2px solid #eaeaea;
      .item-left {
        height: 222px;
        width: 610px;
        align-self: flex-end;
        .nameInfo {
          font-size: 30px;
          color: #d84958;
          height: 50px;
          line-height: 50px;
          span {
            margin-right: 20px;
            &.cur {
              color: #009b6b;
            }
          }
        }
        .detail {
          display: flex;
          height: 170px;
          .detail-left,
          .detail-right {
            flex: 1;
            div {
              height: 35px;
              line-height: 35px;
              span {
                font-size: 24px;
                color: #525252;
                & + span {
                  margin-left: 25px;
                }
              }
            }
          }
        }
      }
      .item-right {
        align-self: flex-end;
        height: 213px;
        width: 120px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        span {
          width: 120px;
          height: 64px;
          border-radius: 10px;
          line-height: 64px;
          text-align: center;
          color: #fff;
          font-size: 26px;
          background: #e14f4f;
          &.cur {
            background: #cbcbcb;
            color: #fff;
          }
        }
      }
    }
  }
  // 结算策略
  .resultWrap {
    margin-top: 40px;
    padding: 0 30px;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    background: #fff;
    .item {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eaeaea;
      height: 110px;
      padding: 20px 0;
      div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        p {
          color: #606060;
          &.cur {
            color: #009b6b;
          }
          &.old {
            color: #d84958;
          }
          &:first-child {
            font-size: 30px;
          }
          &:last-child {
            font-size: 24px;
          }
        }
        &.first {
          align-items: flex-start;
        }
        &.second {
          align-items: center;
        }
        &.third {
          align-items: flex-end;
        }
      }
      &:last-child {
        border-bottom: 0 none;
      }
    }
  }
}
</style>
<template>
  <div id="home">
    <!-- 头部 -->
    <div class="header">
      <div>
        <img class="icon" src="../assets/icon-back.png" alt>
        <p>实盘 - 策略买股</p>
        <span class="rolus">规则</span>
      </div>
    </div>
    <!-- tab -->
    <div class="tabWrap">
      <div
        @click="changeTab(index)"
        v-for="(item,index) in tabList"
        :key="item.id"
        :class="currentTab == index ? 'cur' : ''"
      >{{item.tabName}}</div>
    </div>
    <!-- 创建策略 -->
    <div v-if="currentTab == 0" class="createItem">
      <div class="createTab">
        <div @click="changeType(0)" :class="currentType == 0 ? 'cur' : ''">创建我的策略</div>
        <div @click="changeType(1)" :class="currentType == 1 ? 'cur' : ''">创建结算策略</div>
        <div @click="changeType(2)" :class="currentType == 2 ? 'cur' : ''">今日递延</div>
      </div>
      <div class="myGame" v-if="currentType == 0">
        <div>
          <span>股票名称</span>
          <input v-model="addItem.stockName" type="text" placeholder="输入股票名称">
        </div>
        <div>
          <span>股票编号</span>
          <input v-model="addItem.stockNum" type="text" placeholder="输入股票编号">
        </div>
        <div>
          <span>股票指数</span>
          <input v-model.number="addItem.stockUpNum" type="number" placeholder="输入股票指数">
        </div>
        <div>
          <span>股票百分比</span>
          <input v-model.number="addItem.stockUpPercent" type="number" placeholder="输入股票指数,不要带 % 号">
        </div>
        <div>
          <span>委托买入</span>
          <input v-model.number="addItem.buyIn" type="number" placeholder="输入委托买入金额">
        </div>
        <div>
          <span>止损</span>
          <input v-model.number="addItem.stopLoss" type="number" placeholder="输入止损金额">
        </div>
        <div>
          <span>现价</span>
          <input v-model.number="addItem.newPrice" type="number" placeholder="输入现价">
        </div>
        <div>
          <span>数量</span>
          <input v-model.number="addItem.num" type="number" placeholder="输入数量">
        </div>
        <div>
          <span>交易日期</span>
          <input v-model="addItem.dealDate" type="text" placeholder="输入交易日期19-01-01格式">
        </div>
        <div>
          <span>交易时间</span>
          <input v-model="addItem.dealTime" type="text" placeholder="输入交易时间12:12格式">
        </div>
        <div>
          <span>预警线</span>
          <input v-model.number="addItem.noticeLine" type="number" placeholder="输入预警线">
        </div>
        <div>
          <span>保证金</span>
          <input v-model.number="addItem.bailMoney" type="number" placeholder="输入保证金金额">
        </div>
        <div>
          <span>追加</span>
          <input v-model.number="addItem.append" type="number" placeholder="输入追加">
        </div>
        <div>
          <span>递延条件</span>
          <input v-model.number="addItem.term" type="number" placeholder="输入递延条件">
        </div>
        <div class="btnWrap">
          <p class="changeBtn" @click="createGame('change','myGame')">修改</p>
          <p class="createBtn" @click="createGame('create','myGame')">创建</p>
        </div>
      </div>
      <div class="resultGame" v-else-if="currentType == 1">
        <div>
          <span>股票名称</span>
          <input v-model="addResult.stockName" type="text" placeholder="输入股票名称">
        </div>
        <div>
          <span>购买股数</span>
          <input v-model.number="addResult.stockDealNum" type="number" placeholder="输入购买股数">
        </div>
        <div>
          <span>成交金额</span>
          <input v-model.number="addResult.stockDealMoney" type="number" placeholder="输入成交金额">
        </div>
        <div>
          <span>交易盈亏</span>
          <input v-model.number="addResult.stockLoss" type="number" placeholder="输入交易盈亏">
        </div>
        <div class="btnWrap">
          <p class="changeBtn" @click="createGame('change','resultGame')">修改</p>
          <p class="createBtn" @click="createGame('create','resultGame')">创建</p>
        </div>
      </div>
      <div class="todayGame" v-else>
        <div>
          <span>递延总额</span>
          <input v-model.number="todayData.totalMoney" type="number" placeholder="输入递延总额">
        </div>
        <div>
          <span>账户余额</span>
          <input v-model.number="todayData.balanceMoney" type="number" placeholder="输入账户余额">
        </div>
        <div class="btnWrap">
          <p class="changeBtn" @click="changeTodayGame">修改</p>
        </div>
      </div>
    </div>
    <!-- 我的策略 -->
    <div v-else-if="currentTab == 1">
      <!-- 公告 -->
      <div class="notice">
        <p @click="changeToday">今日递延费总额{{todayData.totalMoney}}元，账户余额{{todayData.balanceMoney}}元</p>
      </div>
      <!-- 列表 -->
      <div class="itemList">
        <div class="item" v-for="(item,index) in dataList" :key="index">
          <div class="item-left" @click="changeGame('myGame',item,index)">
            <div class="nameInfo">
              <span>{{item.stockName}}</span>
              <span>({{item.stockNum}})</span>
              <span v-if="item.stockUpNum-0>0">{{item.stockUpNum}}</span>
              <span v-else class="cur">{{item.stockUpNum}}</span>
              <span v-if="item.stockUpPercent-0>0">{{item.stockUpPercent}}%</span>
              <span v-else class="cur">{{item.stockUpPercent}}%</span>
            </div>
            <div class="detail">
              <div class="detail-left">
                <div>
                  <span>委托买入</span>
                  <span>{{item.buyIn | NumFormat}}</span>
                </div>
                <div>
                  <span>现价</span>
                  <span>{{item.newPrice | NumFormat}}</span>
                </div>
                <div>
                  <span>交易日期</span>
                  <span>
                    {{item.dealDate}}
                    <span>{{item.dealTime}}</span>
                  </span>
                </div>
                <div>
                  <span>保证金</span>
                  <span>{{item.bailMoney | NumFormat}}</span>
                </div>
                <div>
                  <span>递延条件</span>
                  <span>{{item.term | NumFormat}}</span>
                </div>
              </div>
              <div class="detail-right">
                <div>
                  <span>止损</span>
                  <span>{{item.stopLoss | NumFormat}}</span>
                </div>
                <div>
                  <span>数量</span>
                  <span>{{item.num}}</span>
                </div>
                <div>
                  <span>预警线</span>
                  <span>{{item.noticeLine | NumFormat}}</span>
                </div>
                <div>
                  <span>追加</span>
                  <span>{{item.append | NumFormat}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="item-right">
            <span @click="changeColor(index)" :class="item.buttonColor ? 'cur':''">委托卖出</span>
            <span>追加</span>
            <span @click="deleteItem(index,'myGame')">止盈调整</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 结算策略 -->
    <div v-else>
      <div class="resultWrap">
        <div class="item" v-for="(item,index) in resultList" :key="index">
          <div class="first" @click="deleteItem(index,'resultGame')">
            <p>{{item.stockName}}</p>
            <p>{{item.stockDealNum}}股</p>
          </div>
          <div class="second">
            <p>成交金额</p>
            <p>{{item.stockDealMoney | NumFormat}}</p>
          </div>
          <div class="third" @click="changeGame('resultGame',item,index)">
            <p>交易盈亏</p>
            <p v-if="item.stockLoss-0>0" class="old">{{item.stockLoss | NumFormat}}</p>
            <p v-else class="cur">{{item.stockLoss | NumFormat}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "home",
  data() {
    return {
      changeIndex: "",
      currentTab: 1, //当前tab
      currentType: 0, //当前创建策略类型
      // 我的策略创建表单
      addItem: {
        stockName: "",
        stockNum: "",
        stockUpNum: "",
        stockUpPercent: "",
        buyIn: "",
        newPrice: "",
        dealDate: "",
        dealTime: "",
        bailMoney: "",
        term: "",
        stopLoss: "",
        num: "",
        noticeLine: "",
        append: "",
        buttonColor: 0
      },
      // 结算策略创建表单
      addResult: {
        stockName: "",
        stockDealNum: "",
        stockDealMoney: "",
        stockLoss: ""
      },
      tabList: [
        {
          tabName: "创建策略",
          id: 0
        },
        {
          tabName: "我的策略",
          id: 1
        },
        {
          tabName: "结算策略",
          id: 2
        }
      ]
    };
  },
  filters: {
    // 金钱转换
    NumFormat(value) {
      if (!value) return "0.00";
      var intPart = Number(value) | 0; //获取整数部分
      var intPartFormat = intPart
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); //将整数部分逢三一断

      var floatPart = ".00"; //预定义小数部分
      var value2Array = value.toString().split(".");
      //=2表示数据有小数位
      if (value2Array.length == 2) {
        floatPart = value2Array[1].toString(); //拿到小数部分
        if (floatPart.length == 1) {
          //补0
          return intPartFormat + "." + floatPart + "0";
        } else {
          return intPartFormat + "." + floatPart;
        }
      } else {
        return intPartFormat + floatPart;
      }
    }
  },
  computed: {
    dataList() {
      var defaultData = [
        {
          stockName: "益生股份",
          stockNum: "002458",
          stockUpNum: "5636.250",
          stockUpPercent: "7.09",
          buyIn: "24.09",
          newPrice: "25.81",
          dealDate: "19-04-11",
          dealTime: "10:42",
          bailMoney: "16000.00",
          term: "-8000.00",
          stopLoss: "-11200.00",
          num: "3300",
          noticeLine: "-8000.00",
          append: "0.00",
          buttonColor: 0
        }
      ];
      if (localStorage.dataList) {
        defaultData = JSON.parse(localStorage.dataList);
      }
      return defaultData;
    },
    resultList() {
      var defaultData = [
        {
          stockName: "海信电器",
          stockDealNum: "4400",
          stockDealMoney: "46948.00",
          stockLoss: "-2559.13"
        }
      ];
      if (localStorage.resultList) {
        defaultData = JSON.parse(localStorage.resultList);
      }
      return defaultData;
    },
    todayData() {
      var defaultData = {
        totalMoney: "240.00",
        balanceMoney: "33520"
      };
      if (localStorage.todayData) {
        defaultData = JSON.parse(localStorage.todayData);
      }
      return defaultData;
    }
  },
  methods: {
    saveStorage() {
      this.changeIndex = "";
      localStorage.setItem("dataList", JSON.stringify(this.dataList));
      localStorage.setItem("resultList", JSON.stringify(this.resultList));
      localStorage.setItem("todayData", JSON.stringify(this.todayData));
    },
    // tab切换
    changeTab(index) {
      this.currentTab = index;
    },
    // 切换创建类型
    changeType(index) {
      this.currentType = index;
    },
    // 修改每一项的委托卖出的颜色
    changeColor(index) {
      this.dataList[index].buttonColor = !this.dataList[index].buttonColor - 0;
      this.$forceUpdate();
      this.saveStorage();
    },
    // 点击列表修改详情
    changeGame(type, item, index) {
      this.currentTab = 0;
      this.changeIndex = index;
      if (type == "myGame") {
        this.currentType = 0;
        this.addItem = JSON.parse(JSON.stringify(item));
      } else {
        this.currentType = 1;
        this.addResult = JSON.parse(JSON.stringify(item));
      }
    },
    // 点击今日递延修改金额
    changeToday() {
      this.currentTab = 0;
      this.currentType = 2;
    },
    // 确定修改今日递延
    changeTodayGame() {
      this.saveStorage();
      this.currentTab = 1;
    },
    // 创建策略
    createGame(isChange, gameType) {
      var item = gameType == "myGame" ? this.addItem : this.addResult;
      var len = Object.keys(item).length;
      var total = 0;
      // 字段为空校验
      for (var i in item) {
        if (item[i] === "") {
          alert("有字段为空，请确认");
          return;
        } else {
          total += 1;
        }
      }
      // 如果都填完了
      if (total == len) {
        var newItem = {};
        // 插入新数据
        for (var j in item) {
          newItem[j] = item[j];
          item[j] = "";
        }
        // 判断类型是我的策略还是结算策略
        if (gameType == "myGame") {
          if (isChange == "change") {
            this.dataList.splice(this.changeIndex, 1, newItem);
          } else {
            this.dataList.push(newItem);
          }
          this.currentTab = 1;
        } else {
          if (isChange == "change") {
            this.resultList.splice(this.changeIndex, 1, newItem);
          } else {
            this.resultList.push(newItem);
          }
          this.currentTab = 2;
        }
        this.saveStorage();
      }
    },
    // 删除项目
    deleteItem(index, type) {
      var getDelete = confirm("确定删除这条？");
      if (getDelete) {
        if (type == "myGame") {
          this.dataList.splice(index, 1);
        } else {
          this.resultList.splice(index, 1);
        }
        this.$forceUpdate();
        this.saveStorage();
      }
    }
  }
};
</script>